<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>路由管理</span>
			<el-button v-permission="'system:operation:create'" type="primary" plain icon="el-icon-circle-plus-outline"
				@click="insert_dialog_visible = true">
				添加操作按钮</el-button>
		</div>
		<el-table :data="operation" style="width: 100%">
			<el-table-column prop="operation_id" label="#"></el-table-column>
			<el-table-column prop="operation_name" label="操作名称"></el-table-column>
			<el-table-column prop="operation_code" label="操作代码"></el-table-column>
			<el-table-column prop="operation_description" label="操作描述"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button v-permission="'system:operation:edit'" type="primary" plain icon="el-icon-edit"
						@click="openEdit(scope.row)">编辑</el-button>
					<el-button v-permission="'system:operation:remove'" type="danger" plain icon="el-icon-delete"
						@click="handleRemove(scope.row.operation_id, scope.$index)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 添加 -->
		<el-dialog title="添加操作按钮" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
			<el-form :model="insert_form" ref="insert_form" status-icon label-width="100px" :rules="rules">
				<el-form-item label="操作名称:" prop="operation_name">
					<el-input type="text" v-model="insert_form.operation_name" autocomplete="off"
						placeholder="请输入操作按钮名称"></el-input>
				</el-form-item>
				<el-form-item label="操作代码:" prop="operation_code">
					<el-input type="text" v-model="insert_form.operation_code" autocomplete="off"
						placeholder="请输入英文的操作代码"></el-input>
				</el-form-item>
				<el-form-item label="操作描述:" prop="operation_description">
					<el-input type="text" v-model="insert_form.operation_description" autocomplete="off"
						placeholder="请输入操作描述"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="insert_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleAdd">添 加</el-button>
			</span>
		</el-dialog>

		<!-- 编辑 -->
		<el-dialog title="编辑操作按钮" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
			<el-form :model="edit_form" ref="edit_form" status-icon label-width="100px" :rules="rules">
				<el-form-item label="操作名称:" prop="operation_name">
					<el-input type="text" v-model="edit_form.operation_name" autocomplete="off"
						placeholder="请输入操作按钮名称"></el-input>
				</el-form-item>
				<el-form-item label="操作代码:" prop="operation_code">
					<el-input type="text" v-model="edit_form.operation_code" autocomplete="off"
						placeholder="请输入英文的操作代码"></el-input>
				</el-form-item>
				<el-form-item label="操作描述:" prop="operation_description">
					<el-input type="text" v-model="edit_form.operation_description" autocomplete="off"
						placeholder="请输入操作描述"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="edit_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">保存</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
	name: 'List',
	data() {
		return {
			// 添加
			insert_dialog_visible: false,
			insert_form: {
				operation_name: '',
				operation_code: '',
				operation_description: '',
			},
			rules: {
				operation_name: [{ required: true, message: "请填写操作名称！", trigger: 'blur' }],
				operation_code: [
					{ required: true, message: "请填写英文的操作代码！", trigger: 'blur' },
					{
						pattern: /^[a-zA-Z]+$/,
						message: '只能填写英文代码！',
						trigger: 'blur'
					}
				],
				operation_description: [{ required: true, message: "填写操作描述！", trigger: 'blur' }],
			},
			// 编辑
			edit_form: {
				operation_name: '',
				operation_code: '',
				operation_description: '',
			},
			edit_dialog_visible: false,
		}
	},
	created() {
		document.title = "操作按钮管理";
		this.operation_list({ pagesize: 20 });
	},
	computed: {
		...mapState('operation', ['operation']),
	},
	methods: {
		...mapActions('operation', ['operation_list']),
		// 添加
		...mapActions('operation', ['add_operation']),
		handleAdd() {
			this.$refs.insert_form.validate(async (valid) => {
				if (valid) {
					let { status, msg } = await this.add_operation({ ...this.insert_form });
					if (status) {
						// 信息提示
						this.$message.success(msg);
						this.insert_dialog_visible = false;
					} else {
						this.$message.error(msg);
					}
				}
			})
		},
		// 编辑
		...mapActions('operation', ['edit_operation']),
		handleEdit() {
			let { operation_id } = this.edit_form;
			this.$refs.edit_form.validate(async (valid) => {
				if (valid) {
					let { status, msg } = await this.edit_operation({ operation_id, ...this.edit_form });
					if (status) {
						this.$message.success(msg);
						this.edit_dialog_visible = false;
					} else {
						this.$message.error(msg);
					}
				}
			});
		},
		// 删除
		...mapActions('operation', ['remove_operation']),
		handleRemove(operation_id, index) {
			this.$confirm('该操作将删除该操作, 是否继续?', '提示', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await this.remove_operation({ operation_id, index });
					if (status) {
						// 信息提示
						this.$message.success(msg);
					} else {
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info("已取消该操作！");
				});
		},
		// 打开
		openEdit(operate) {
			this.current_operate = operate;
			this.edit_form = { ...operate };
			this.edit_dialog_visible = true;
		},
		// 关闭弹窗，清除表单验证状态
		handleCloseDialog(formName) {
			// formName是变量，不能使用 ref.formName
			this.$refs[formName].resetFields();
		},
	},
}
</script>

<style>
.clearfix {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
